<template>
    <div class="map-sty">
        <div class="map-sty-title" >调查总数：{{ numpro }}</div>
        <div style="height:524px" ref="mainmap"></div>
    </div>
    
</template>

<script setup>
import { onMounted, ref,onUnmounted } from 'vue';
import * as echarts from 'echarts';
import chinaMap from '@/utils/china.json';

    const mandata = ref([
        {name: '北京市', value: 100}, {name: '天津市', value: 100},{name: '河北省', value: 100},
        {name: '山西省', value: 100},{name: '内蒙古自治区', value: 10},{name: '宁夏回族自治区', value: 100},
        {name: '新疆维吾尔自治区', value: 100},{name: '青海省', value: 100},
    ])
    const numpro = ref(1000)
    const mainmap = ref(null);
    let chart = null;
 
    const initChart = () => {
        chart = echarts.init(mainmap.value);
        chart.hideLoading();
        echarts.registerMap("china", { geoJSON: chinaMap });

        const geoCoordMap = {
                '甘肃省': [103.855472,36.144781],
                '新疆维吾尔自治区': [81.484359,41.522164],
                "青海省": [95.024769,36.055196],
                '西藏自治区': [87.040342,31.35228],
                "四川省": [102.825223,30.718583],
                "重庆市": [107.019807,29.728002],
                "云南省": [99.992039,24.764258],
                "贵州省": [105.84238,26.96133],
                "山西省": [111.950282,37.870982],
                "陕西省": [108.234028,34.012487],
                "河南省": [113.53245,33.674746],
                "湖南省": [111.324774,27.831665],
                "湖北省": [111.987077,31.051805],
                "广西壮族自治区": [107.240574,23.870695],
                '内蒙古自治区': [110.257731,41.452994],
                '黑龙江省': [127.07286,47.92609],
                "吉林省": [125.343514,43.709587],
                '辽宁省': [121.406493,41.563631],
                "河北省": [114.378725,38.452026],
                "北京市": [116.31964,40.167],
                "天津市": [117.257902,39.085768],
                "山东省": [117.920205,36.368295],
                "江苏省": [119.097632,33.505371],
                "安徽省": [116.853162,31.856156],
                "浙江省": [119.759935,29.115927],
                "上海市": [121.415691,31.115143],
                "江西省": [115.160611,27.175448],
                "福建省": [117.515464,26.183787],
                '广东省': [113.284086,23.12409],
                '海南省': [109.715011,19.190074],
                "台湾省": [120.808581,23.718329],
                '宁夏回族自治区': [106.164332,37.461479]
            }
            
        const data = mandata.value;

        var convertData = function (data) {
                var res = [];
                for (var i = 0; i < data.length; i++) {
                    var geoCoord = geoCoordMap[data[i].name];
                    if (geoCoord) {
                        res.push({
                            name: data[i].name,
                            value: geoCoord.concat(data[i].value)
                        });
                    }
                }
                return res;
            };
        // ...（保持option内容不变，直接复制粘贴原有的option定义）
        const option = {
                toolbox:{
                        show: false,
                        feature:{
                            saveAsImage:{
                            show:true,
                            excludeComponents:['toolboxl'],
                            pixelRatio:2
                            }
                        }
                    },
                    // backgroundColor: '#020933',
                    title: {
                        text: '',
                        subtext: '',
                        x: 'center',
                        textStyle: {
                            color: '#ccc'
                        }
                    },
                    tooltip: {
                        trigger: 'item',
                        formatter: function (params) {
                        if(typeof(params.value)[2] == "undefined"){
                            return params.name + ' : ' + params.value;
                        }else{
                            return params.name + ' : ' + params.value[2];
                        }
                        }
                    },
                    legend: {
                        orient: 'vertical',
                        y: 'bottom',
                        x: 'right',
                        data: ['pm2.5'],
                        textStyle: {
                            color: '#fff'
                        }
                    },
                    visualMap: {
                        show: false,
                        min: 500,
                        max: 10000,
                        left: 'left',
                        top: 'bottom',
                        text: ['高', '低'],
                        calculable: true,
                        seriesIndex: [1],
                        inRange: {
                            color: ['#3B5077', '#031525'] 
                        }
                    },
                    geo: {
                        show: true,
                        map: 'china',
                        label: {
                            normal: {
                                show: false
                            },
                            emphasis: {
                                show: false,
                            }
                        },
                        roam: true,
                        itemStyle: {
                            normal: {
                                areaColor: 'thansparent',
                                borderColor: '#3fdaff',
                                borderWidth: 1,
                                shadowColor: 'rgba(173, 200, 185, 0.5)',
                                shadowBlur: 30
                            },
                            emphasis: {
                                areaColor: '#2B91B7',
                            }
                        }
                    },
                    series : [
                {
                        name: 'light',
                        type: 'scatter',
                        coordinateSystem: 'geo',
                        data: convertData(data),
                        symbolSize: function (val) {
                            return val[2] / 230;
                        },
                        label: {
                            normal: {
                                formatter: '{b}',
                                position: 'right',
                                show: true
                            },
                            emphasis: {
                                show: true
                            }
                        },
                        itemStyle: {
                            normal: {
                                color: '#F4E925'
                            }
                        }
                    },
                    {
                        type: 'map',
                        map: 'china',
                        geoIndex: 0,
                        aspectScale: 0.75, 
                        showLegendSymbol: false,
                        label: {
                            normal: {
                                show: false
                            },
                            emphasis: {
                                show: false,
                                textStyle: {
                                    color: '#fff'
                                }
                            }
                        },
                        roam: true,
                        itemStyle: {
                            normal: {
                                areaColor: '#031525',
                                borderColor: '#FFFFFF',
                            },
                            emphasis: {
                                areaColor: '#2B91B7'
                            }
                        },
                        animation: false,
                        data: data
                    },
                    {
                        name: 'Top 5',
                        type: 'effectScatter',
                        coordinateSystem: 'geo',
                        data: convertData(data.sort(function (a, b) {
                            return b.value - a.value;
                        }).slice(0, 6)),
                        symbolSize: function (val) {
                            return val[2] / 230;
                        },
                        showEffectOn: 'render',
                        rippleEffect: {
                            brushType: 'stroke'
                        },
                        hoverAnimation: true,
                        label: {
                            normal: {
                                formatter: '{b}',
                                position: 'right',
                                show: true
                            }
                        },
                        itemStyle: {
                            normal: {
                                color: '#F4E925',
                                shadowBlur: 10,
                                shadowColor: '#05C3F9'
                            }
                        },
                        zlevel: 1
                    },
                    
                ]
            };
        chart.setOption(option);
    };

    onMounted(async () => {
            initChart();
        });

</script>

<style scoped>
.map-sty{
    border: 1px solid #0e87cd;
    margin-top: 20px;
}
.map-sty-title{

    font-size: 28px;
    color: #fff;
    line-height: 37px;
    text-shadow: 0px 2px 2px rgba(13,51,117,0.67);
    background: linear-gradient(0deg, #73CFFB 0%, #FFFFFF 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    padding-top: 50px;
}
</style>